<template>

  <div class="wrap demo-infinite-container">
    <!-- <mu-list>
        <mu-grid-tile v-for="(subject, index) in subjects" :key="subject.id+index">
          <img :src="subject.images.large"/>
          <span slot="title">{{subject.title}}</span>
        </mu-grid-tile>
        <mu-divider/>
    </mu-list> -->
    <mu-row class="paper-row">
      <mu-col class="paper-elem" width='33' tablet="25" desktop="20" v-for="(subject, index) in subjects" :key="subject.id+index">
        <!--MovieSubject 在 router/index.js 中定义-->
        <router-link :to="{name: 'MovieSubject', params: {id: subject.id}}">
          <mu-paper>
            <div class="paper-border">
              <vue-lazy-component>
                <div class="paper-img" :style="'background-image: url('+subject.images.large+')'"/>
              </vue-lazy-component>
            </div>
            <div class="paper-text">
              <p>
                {{subject.title}}
              </p>
              <p class="star-box">
                <span class="paper-star" v-if="subject.rating.average > 0">
                  <Star class="star" :rating='subject.rating.average'></Star>
                </span>
                <span class="paper-rating">{{subject.rating.average | fixNum }}</span>
              </p>
            </div>
          </mu-paper>
        </router-link>
      </mu-col>
    </mu-row>
    <mu-infinite-scroll :scroller="scroller" :loading="loading" @load="fetchData"/>
    <ToTop page="Card"></ToTop>
  </div>
</template>
<script type="text/javascript">
  import { component as VueLazyComponent } from '@xunlei/vue-lazy-component'
  import {mapState} from 'vuex'
  import Star from '@/components/Star'
  import ToTop from '@/components/toTop'
  import * as type from '@/store/movies/type.js'
  export default{
    name: 'movieList',
    components: {
      'vue-lazy-component': VueLazyComponent,
      Star,
      ToTop
    },
    data(){
      return {
          scroller: null
      }
    },
    props: ['tabName', 'changeTab'],
    computed: {
      ... mapState({
        subjects(state){
          return state.MovieModule.movies[this.tabName].subjects
        },
        page(state){
          return state.MovieModule.movies[this.tabName].curPage
        },
        offset: state  => state.MovieModule.movies.offset,
        loading: state => state.MovieModule.movies.isLoading,
        isEnd (state){
            return state.MovieModule.movies[this.tabName].isEnd
        }
      })
    },
    created(){
      this.scroller = this.$el
      this.fetchData()
    },
    beforeUpdate(){
      if(this.changeTab == true){
        this.fetchData()
        // 提交改变父组件变量的值
        this.$emit('change-tab', false)
      }
    },
    destroyed(){
      console.log('[destroyed]')
    },
    methods: {
      fetchData(){

        // if(!(this.$store.state.MovieModule.movies[this.tabName].subjects &&
        //   this.$store.state.MovieModule.movies[this.tabName].subjects.length > 0)
        //     ){
              if(!this.isEnd){
                console.log('------取第:----' + this.page + '--- 页---')
                // 以载荷形式分发
                this.$store.dispatch(type.FETCH_MOVIES, {type: this.tabName, start: (this.page - 1) * this.offset, count: this.offset})
              }else{
                console.log('-----没有多余的数据啦---')
              }
            // }

      }
    }
  }
</script>

<style lang='css' scoped>
.wrap{
  padding: 6px;
  /*height: 677px;*/
  /*overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #d9d9d9;*/
}
.wrap>.paper-row{
  justify-content: flex-start;
  flex-flow: row wrap;
}
.paper-elem{
  /*padding: 6px;*/
}
.paper-border{
  position: relative;
  border-radius: 2px 2px 0 0;
  overflow: hidden;
}
.paper-img{
  position: relative;
  width: 100%;
  padding-top:141%;
  background-size: cover;
  -moz-background-size: cover;
}
.paper-img-wrap{
  top:0;
  left: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 2px 2px 0px 0px;
  box-sizing: border-box;
}
.paper-img-wrap>img{
  width: 100%;
}
.paper-text{
  padding: 6px 0 2px 0;
}
.paper-text>p{
  margin: 0;
  padding: 0 6px;
  font-size: 14px;
  height: 18px;
  line-height: 16px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.star-icon{
  font-size: 14px;
  margin-right: -4px;
  float: left;
}
.star-box{
  display: flex;
  color: #ff6f00;
}
.star{
  letter-spacing: -3px;
}
.paper-star{
  margin-right: 3px;
  /*font-size: 12px;*/
}
.paper-rating{
  position: relative;
  /*top: -2px;*/
}
</style>
